* { margin: 0; padding: 0; }
body, html{
  width: 100%;
  height: 100%;
  overflow: scroll;
  background-color: rgba(244, 244, 244, 1);
}
::-webkit-scrollbar {
  display: none;
}
#header{
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(233, 233, 233, 1);
  height: 67px;
}
#head-nav{
  width: 1440px;
  height: 100%;
  margin:0 auto;
}
#head-nav > ul > li{
  float: left;
  list-style: none;
  margin-right: 90px;
}
a{
  text-decoration: none;
}
a:link, a:visited{
  color: #949494;
}
a.current{
  color: #ff9900;
}
a:hover, a:visited:hover, a:link:hover{
  color: #ff9900;
}
.flex-row-between, .flex-column-between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-row-around, .flex-column-around{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-column-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column-start, .flex-row-start{
  display: flex;
  justify-content: flex-start;
}
.flex-row-between, .flex-row-around, .flex-row-start{
  flex-direction: row;
}
.flex-column-between, .flex-column-center, .flex-column-start, .flex-column-around{
  flex-direction: column;
}
.flex-row-center{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap
}

.align-items-start{
  align-items: flex-start;
}

@keyframes boxShadow{
  0% {
    box-shadow: 0px 0px 0px #aaa;
  }
  100% {
    box-shadow: 0px 3px 14px #aaa;
  }
}

.title24{
  font-size: 24px;
  color: #797979;
}

.title18{
  font-size: 18px;
  color: #989898;
}

.title14{
  font-size: 14px;
  color: #989898;
}

.error_msg{
  padding: 30px 0;
  color: red;
}

#content-main{
  width: 1440px;
  margin:0 auto;
  background-color: white;
}
.btn-long{
  display: block;
  width: 140px;
  background-color: #ff9900;
  color: white;
  height: 40px;
  border: none;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.btn-tag{
  display: block;
  padding: 5px 10px;
  text-align: center;
  background-color: #eeeeee;
  color: #333333;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.btn-long:hover, .btn-short:hover{
  background-color: bisque;
}
.btn{
  cursor: pointer;
}
.btn:hover{
  background-color: bisque;
}
.btn-short{
  display: block;
  padding: 5px 20px;
  background-color: #ff9900;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.btn-disabled {
  background-color: #cccccc !important;
  color: #ffffff !important;
}

.comoon-border{
  border: 1px solid #eeeeee;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

/* index.html begin */
.list-title{
  width: 1340px;
  margin: 0 auto;
  line-height: 70px;
}
#search-con{
  padding: 5px;
  border: none;
  border-radius: 5px;
  margin-right: 5px;
}
input[type="submit"]{
  padding: 5px 12px;
  border: none;
  border-radius: 5px;
  background-color: #ff9900;
  color: white;
  cursor: pointer;
}

.layui-layer-btn .layui-layer-btn0 {
  border-color: #ff9900 !important;
  background-color: #ff9900 !important;
  color: #fff;
}

#content-main > .con-list, #content-main > .con-rec{
  background-color: #ffffff;
  padding: 15px;
}
.con-list-item{
  position: relative;
  width: 980px;
  padding: 35px 25px;
  margin-top: 20px;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.con-rec{
  width: 285px;
}
.con-list-item .item-con{
  width: 540px;
}
.item-ope{
  width: 150px;
  text-align: right;
}
.item-ope > span.btn-long{
  margin-top: 40px;
}
.course-item-avatar{
  width: 256px;
  height: 175px;
  background-color: rgb(1, 50, 160);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  box-sizing: border-box;
  padding: 10px;
}
.item-name{
  font-size: 18px;
  color: #797979;
}
.item-teacher{
  font-size: 14px;
  color: #989898;
  margin-top: 15px;
}
.item-desc{
  font-size: 16px;
  color: #989898;
  margin-top: 20px;
}
.item-student-count{
  color: #989898;
  font-size: 16px;
}
/* .con-rec-title{
  width: 286px;
} */
.con-rec-title:nth-child(n+2) {
  margin-top: 10px;
}
.con-rec-name{
  width: calc(100% - 20px);
  height: 120px;
  background-color: aliceblue;
  color: #000000;
  margin-top: 10px;
}
.con-rec-name:hover{
  cursor: pointer;
  animation: boxShadow 0.3s linear;
  -webkit-animation: boxShadow 0.3s linear;
  animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.con-list-tip{
  position: absolute;
  top: 2px;
  right: 10px;
  font-size: 20px;
  font-weight: 400;
  color: #515151;
}

/* start course */
.course-title-desc{
  /* width: 980px; */
  padding: 35px 25px 5px 25px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  position: relative;
}
.course-title-desc > div:first-child{
  width: 100%;
  height: 174px;
}
#course-info{
  width: calc(100% - 270px);
  height: 90%;
}
#course-info > div{
  width: 100%;
}
#couse-info > div:nth-child(3){
  margin-top: 12px;
}
.course-hour-score{
  width: 800px;
  margin-top: 10px;
}
.layui-tab-brief>.layui-tab-title .layui-this{
  color: #ff9900 !important;
}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
  border-bottom: 2px solid #ff9900 !important;
}
.show-chapter-detail{
  width: 80%;
  margin-left: 10px;
  line-height: 30px;
  font-size: 14px;
  color: #A1A1A1;
  font-weight: 400;
}
.active-chapter{
  color: #FFCC00;
}
.active-chapter > a:link, .active-chapter > a:visited, .active-chapter > a{
  color: #FFCC00;
}

/* experimenting */
#main-con{
  width: 1300px;
  padding: 35px 40px;
  padding-bottom: 100px;
  margin: 0 auto;
  background-color: #ffffff;
  align-items: flex-start;
}
#main-con > div:first-child{
  /* width: 960px; */
}
#main-con > div:nth-child(2) {
  width: 290px;
}
#experiment-head{
  width: 1300px;
  margin: 0 auto;
  font-weight: 600;
  color: #6b6b6b;
  font-size: 18px;
  margin-top: 40px;
  margin-bottom: 20px;
}
#experiment-head > span{
  padding-left: 25px;
}
.error_msg{
  margin: 100px;
  text-align: center;
  font-size: 24px;
}
.head-tip{
  width: 10px;
  height: 30px;
  background-color: #ff9900;
  display: inline-block;
  margin-right: 15px;
}
#experiment-info{
  padding: 30px 20px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
}
.avatar-name{
  display: flex;
}
.experiment-name{
  margin-left: 25px;
  height: 174px;
}
.user-count{
  height: 100px;
}
.experiment-name > p:nth-child(2){
  margin-top: 25px;
}
.experiment-name > div{
  margin-top: 70px;
}
.experiment-con-head{
  margin: 30px 0;
}
#experiment-intro, #experiment-desc, .vir-ins{
  padding: 30px 40px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  color: #989898; 
  font-size: 18px;
  line-height: 24px;
}
.error-div {
  width: 960px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.05);
  font-size: 28px;
  font-weight: 400;
  border-radius: 5px;
  color: #989898;
}

#buy-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
}

#buy-bar > div{
  /* width: 1440px; */
  height: 80px;
  background-color: #ffffff;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

#buy-bar > div  span{
  margin-right: 70px;
  display: block;
  background-color: #ff9900;
  padding: 20px 50px;
  border-radius: 5px;
  color: #eeeeee;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

@media screen and (max-width: 1440px) {
  #head-nav, #content-main, #content, #main-con, #experiment-head{
    width: 100%;
  }
  .list-title{
    width: calc(100% - 100px);
  }
  .con-list {
    width: calc(100% - 285px);
  }
  .con-list-item {
    width: calc(100% - 70px);
  }
  .con-rec{
    width: 255px;
    padding: 15px 0;
  }
  .con-list-item .item-con {
    width: calc(100% - 430px);
  }
  #main-con {
    padding:35px 0;
  }
  #main-con > div:nth-child(2) {
    width: 220px;
  }
}

.show-html{
  white-space: pre-line;
}
.layui-progress {
  width: 100%;
  position: fixed;
  top: 0;
}